<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="学号" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.studentid }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="学院" width="170" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.college }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班级" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.classes }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="请假日期" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.start }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="截止日期" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.end }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="点击查看该生详细信息" width="150">
        <template slot-scope="scope">
          <router-link :to="url+scope.row.studentid">点击查看详情</router-link>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="created_at" label="备注">
        <template slot-scope="scope">
          <span>{{ scope.row.remakes }}</span>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-button type="success" :disabled="!(scope.row.is_non_checked==='true')" @click="agree(scope.row.identifier)">同意</el-button>
          <el-button type="danger" :disabled="!(scope.row.is_non_checked==='true')" @click="refuse(scope.row.identifier)">拒绝</el-button>
          <el-button type="info" :disabled="!(scope.row.is_non_report==='true' && scope.row.is_non_checked==='false')" @click="report(scope.row.identifier)">销假</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div align="right" style="margin : 15px;">
      <el-button type="primary" @click="addNew">新增请假信息</el-button>
    </div>
  </div>
</template>

<script>
import { getAllFinishLeaveInfo, checkedAgreeLeaveInfo, checkedRefuseLeaveInfo, reportLeaveInfo } from '@/api/leave'
import router from '@/router'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        已销假: 'success',
        已请假: 'gray',
        未审批: 'danger',
        已拒绝: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      value: '',
      url: '/studentinfo/index/',
      status: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取列表信息
    fetchData() {
      this.listLoading = true
      getAllFinishLeaveInfo().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    addNew() {
      router.push('/leave/addnew')
    },
    agree(identifier) {
      this.$confirm('是否同意该生的请假?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          checkedAgreeLeaveInfo(identifier).then((res) => {
            this.$message({
              type: res.code === 20000 ? 'success' : 'error',
              message: res.message
            })
            this.fetchData()
          }
          )
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审批.'
          })
        })
    },
    report(identifier) {
      this.$confirm('是否销假?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          reportLeaveInfo(identifier).then((res) => {
            this.$message({
              type: res.code === 20000 ? 'success' : 'error',
              message: res.message
            })
            this.fetchData()
          }
          )
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消.'
          })
        })
    },
    refuse(identifier) {
      this.$confirm('是否拒绝该生请假?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          checkedRefuseLeaveInfo(identifier).then((res) => {
            this.$message({
              type: res.code === 20000 ? 'success' : 'error',
              message: res.message
            })
            this.fetchData()
          }
          )
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消.'
          })
        })
    }
  }
}

</script>
